<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../js/layui-v2.5.6/layui/css/layui.css">
    <style>
        a :hover {
            color: red;
        }
        .picimg {
            width: 100%;height: auto;
        }
        .picDetail {
            width: 32%;height:auto;border: solid 1px #eeeeee; padding: 2px; float:left; margin-top: 10px;
        }
        .picDetailTitle{
            text-align: center; margin-top: 3px;
        }
    </style>
</head>
<body>
<br/>
<br/>
<!-- 头部地区 -->
<div class="layui-container layui-row">
    <!-- 轮播图 -->
    <div class="layui-carousel layui-col-md8" id="test1">
        <div carousel-item="" id="carousel_content">
            <div><img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg"
                      onclick="imgClick(2)" alt="图片1"></div>
        </div>
    </div>
    <div class="layui-card layui-col-md-offset9 ">
        <div class="layui-card-header">公告板</div>
        <div id ="scroll_bord" class="layui-side-scroll" style="height: 234px; width: 100%;">
            <a href="//baidu.com">
                <div class="layui-card-body" style="border-bottom: solid 1px #eeeeee">标题2</div>
            </a>
        </div>
    </div>
</div>
<!-- 身体区域 -->
<div id="content" class="layui-container layui-row" style="margin-top: 50px;">
    <!-- 内容咨询区域 -->
    <div class="layui-col-md8 layui-border-box" style="width: 70%; border-bottom: solid 2px gray">
        <div class="layui-card ">
            <div class="layui-card-header" style="width: auto;">
                热点咨询
                <a href="//baidu.com ">
                    <div style="float: right;display: block; font-size: xx-small;color: gray; bottom: 0; ">
                        更多>>>
                    </div>
                </a>
            </div>
            <div id="hot_news" class="layui-side-scroll layui-col-md8" style="width: 100%; height: 450px;">
                <ui>
                    <li style="border-bottom: solid 1px #eeeeee;">
                        <a href="detail.html">
                            <div class="layui-card-body layui-border-box"
                                 style="height: 200px;border-width: 3px; border-color: red;">
                                <img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg" alt=""
                                     style="height: 98%;width:23%; padding: 10px;">
                                <!-- wen zi qu  -->
                                <div style="width: 73%; float: right; display: block; height: 200px;">
                                    <div id="title"
                                         style="height: auto;text-align: left;font-size: large; margin-top: 20px; color: red;  ">
                                        紧急咨询：浙江温岭昨天下午一油罐车发生爆炸，附近居民受伤严重
                                    </div>
                                    <div id="content2" style="margin-top: 20px; height: auto;">
                                        this is a content this is a contentthis is a contentthis is a contentthis is a
                                        contentthis is a contentthis is a contentthis is a contentthis is a contentthis
                                        is a
                                        content
                                    </div>
                                    <div style="font-size: xx-small; bottom: 20px; color: gray; position: absolute; width: 70%;">
                                        <span>消息来源：<span id="fromSource">东方快讯</span></span>
                                        <span style="float: right; margin-right: 10px;">总浏览量：<span
                                                id="count">0</span></span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li style="border-bottom: solid 1px #eeeeee;">
                        <div class="layui-card-body layui-border-box"
                             style="height: 200px;border-width: 3px; border-color: red;">
                            <img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg"
                                 style="height: 98%;width:23%; padding: 10px;">
                            <!-- wen zi qu  -->
                            <div style="width: 73%; float: right; display: block; height: 200px;">
                                <div id="title"
                                     style="height: auto;text-align: left;font-size: large; margin-top: 20px; color: red;  ">
                                    紧急咨询：浙江温岭昨天下午一油罐车发生爆炸，附近居民受伤严重
                                </div>
                                <div id="content2" style="margin-top: 20px; height: auto;">
                                    this is a content this is a contentthis is a contentthis is a contentthis is a
                                    contentthis is a contentthis is a contentthis is a contentthis is a contentthis is a
                                    content
                                </div>
                                <div style="font-size: xx-small; bottom: 20px; color: gray; position: absolute; width: 70%;">
                                    <span>消息来源：<span id="fromSource">东方快讯</span></span>
                                    <span style="float: right; margin-right: 10px;">总浏览量：<span
                                            id="count">0</span></span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li style="border-bottom: solid 1px #eeeeee;">
                        <div class="layui-card-body layui-border-box"
                             style="height: 200px;border-width: 3px; border-color: red;">
                            <img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg"
                                 style="height: 98%;width:23%; padding: 10px;">
                            <!-- wen zi qu  -->
                            <div style="width: 73%; float: right; display: block; height: 200px;">
                                <div id="title"
                                     style="height: auto;text-align: left;font-size: large; margin-top: 20px; color: red;  ">
                                    紧急咨询：浙江温岭昨天下午一油罐车发生爆炸，附近居民受伤严重
                                </div>
                                <div id="content2" style="margin-top: 20px; height: auto;">
                                    this is a content this is a contentthis is a contentthis is a contentthis is a
                                    contentthis is a contentthis is a contentthis is a contentthis is a contentthis is a
                                    content
                                </div>
                                <div style="font-size: xx-small; bottom: 20px; color: gray; position: absolute; width: 70%;">
                                    <span>消息来源：<span id="fromSource">东方快讯</span></span>
                                    <span style="float: right; margin-right: 10px;">总浏览量：<span
                                            id="count">0</span></span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li style="border-bottom: solid 1px #eeeeee;">
                        <div class="layui-card-body layui-border-box"
                             style="height: 200px;border-width: 3px; border-color: red;">
                            <img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg"
                                 style="height: 98%;width:23%; padding: 10px;">
                            <!-- wen zi qu  -->
                            <div style="width: 73%; float: right; display: block; height: 200px;">
                                <div id="title"
                                     style="height: auto;text-align: left;font-size: large; margin-top: 20px; color: red;  ">
                                    紧急咨询：浙江温岭昨天下午一油罐车发生爆炸，附近居民受伤严重
                                </div>
                                <div id="content2" style="margin-top: 20px; height: auto;">
                                    this is a content this is a contentthis is a contentthis is a contentthis is a
                                    contentthis is a contentthis is a contentthis is a contentthis is a contentthis is a
                                    content
                                </div>
                                <div style="font-size: xx-small; bottom: 20px; color: gray; position: absolute; width: 70%;">
                                    <span>消息来源：<span id="fromSource">东方快讯</span></span>
                                    <span style="float: right; margin-right: 10px;">总浏览量：<span
                                            id="count">0</span></span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li style="border-bottom: solid 1px #eeeeee;">
                        <div class="layui-card-body layui-border-box"
                             style="height: 200px;border-width: 3px; border-color: red;">
                            <img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg"
                                 style="height: 98%;width:23%; padding: 10px;">
                            <!-- wen zi qu  -->
                            <div style="width: 73%; float: right; display: block; height: 200px;">
                                <div id="title"
                                     style="height: auto;text-align: left;font-size: large; margin-top: 20px; color: red;  ">
                                    紧急咨询：浙江温岭昨天下午一油罐车发生爆炸，附近居民受伤严重
                                </div>
                                <div id="content2" style="margin-top: 20px; height: auto;">
                                    this is a content this is a contentthis is a contentthis is a contentthis is a
                                    contentthis is a contentthis is a contentthis is a contentthis is a contentthis is a
                                    content
                                </div>
                                <div style="font-size: xx-small; bottom: 20px; color: gray; position: absolute; width: 70%;">
                                    <span>消息来源：<span id="fromSource">东方快讯</span></span>
                                    <span style="float: right; margin-right: 10px;">总浏览量：<span
                                            id="count">0</span></span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li style="border-bottom: solid 1px #eeeeee;">
                        <div class="layui-card-body layui-border-box"
                             style="height: 200px;border-width: 3px; border-color: red;">
                            <img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg"
                                 style="height: 98%;width:23%; padding: 10px;">
                            <!-- wen zi qu  -->
                            <div style="width: 73%; float: right; display: block; height: 200px;">
                                <div id="title"
                                     style="height: auto;text-align: left;font-size: large; margin-top: 20px; color: red;  ">
                                    紧急咨询：浙江温岭昨天下午一油罐车发生爆炸，附近居民受伤严重
                                </div>
                                <div id="content2" style="margin-top: 20px; height: auto;">
                                    this is a content this is a contentthis is a contentthis is a contentthis is a
                                    contentthis is a contentthis is a contentthis is a contentthis is a contentthis is a
                                    content
                                </div>
                                <div style="font-size: xx-small; bottom: 20px; color: gray; position: absolute; width: 70%;">
                                    <span>消息来源：<span id="fromSource">东方快讯</span></span>
                                    <span style="float: right; margin-right: 10px;">总浏览量：<span
                                            id="count">0</span></span>
                                </div>
                            </div>
                        </div>
                    </li>

                </ui>
            </div>
        </div>
    </div>
    <!-- 广告位区域 -->
    <div id="ad" class="layui-card layui-col-lg-offset9">
        <div class="layui-card-header" style="border: solid 1px #eeeeee;">广告</div>
        <div id="adtest" class="layui-side-scroll" style="height: 234px;width: 100%;">
            <div class="layui-card-body" style="border-bottom:solid 1px #eeeeee; ">
                这是一个广告位
            </div>
            <div class="layui-card-body" style="border-bottom:solid 1px #eeeeee; ">
                这是一个广告位
            </div>
            <div class="layui-card-body" style="border-bottom:solid 1px #eeeeee; ">
                这是一个广告位
            </div>
            <div class="layui-card-body" style="border-bottom:solid 1px #eeeeee; ">
                这是一个广告位
            </div>
            <div class="layui-card-body" style="border-bottom:solid 1px #eeeeee; ">
                这是一个广告位
            </div>
            <div class="layui-card-body" style="border-bottom:solid 1px #eeeeee; ">
                这是一个广告位
            </div>
            <div class="layui-card-body" style="border-bottom:solid 1px #eeeeee; ">
                这是一个广告位
            </div>
            <div class="layui-card-body" style="border-bottom:solid 1px #eeeeee; ">
                这是一个广告位
            </div>
            <div class="layui-card-body" style="border-bottom:solid 1px #eeeeee; ">
                这是一个广告位
            </div>
            <div class="layui-card-body" style="border-bottom:solid 1px #eeeeee; ">
                这是一个广告位
            </div>
        </div>
    </div>
    <br/>
    <br/>
    <!-- 图片区域 -->
    <!--<div id="pic" class="layui-col-md8" style="width: 70%; height:500px; margin-top: 30px;">
        <div class="layui-card">
            图片专区
            <a href="//baidu.com ">
                <div style="float: right;display: block; font-size: xx-small;color: gray; bottom: 0; ">
                    更多>>>
                </div>
            </a>
        </div>
        &lt;!&ndash; 9宫格 &ndash;&gt;
        <div id="picContent">
            <div class="layui-side-scroll" style="width: 100%;" id = "picList">
                <a href="PicDetail.html?topicId=11581">
                    <div class="picDetail">
                        <img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg" alt="图片"
                             class="picimg">
                        <div class="picDetailTitle">图片标题</div>
                    </div>
                </a>
            </div>
        </div>
    </div>-->
    <br/>
    <!--<fieldset class="layui-side-scroll" style="margin-top: 150px;">
        <legend>图片专区</legend>
    </fieldset>-->
    <div d="pic" class="layui-card layui-col-md8" style="width: 70%; margin-top: 30px;" >
        图片专区
        <input type="text" id="searchText" placeholder="可在此处检索标题" autocomplete="off" style="width: 70%;margin-left: 15px;"/>
        <i class="layui-icon layui-icon-close" onclick="clearSearchText()"></i>
        <a href="//baidu.com ">
            <div style="float: right;display: block; font-size: xx-small;color: gray; bottom: 0; ">
                更多>>>
            </div>
        </a>
    </div>
    <ul class="layui-side-scroll" style="height: 500px; width: 70%;" id="LAY_demo2"></ul>
</div>
</body>

<script src="../js/layui-v2.5.6/layui/layui.all.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        var ins = carousel.render({
            elem: '#test1'
            , width: '70%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
        let $ = layui.jquery;
        $(function () {
            // 获取轮播图
            var getHeadUrl = "http://120.27.243.49:7301/mock/5da0991bf59b9f0e89ff3379/example/mock/nav/list"
            $.get(getHeadUrl, function (data, status) {
                console.log(status, data);
                if (status === "success") {
                    let dataList = data.data.url;
                    var htmlText = "";
                    $.each(dataList, function (index, item) {
                        var html = "";
                        html += '<div><img src=';
                        html += item.url;
                        html += ' alt="';
                        html += item.name;
                        //html += '" style="width:auto;height: 100%;" ';
                        html += '" onclick="imgClick(';
                        html += (index + 1);
                        html += ')"></div>';
                        htmlText += html;
                    });
                    $("#carousel_content").html(htmlText);
                } else {
                    layer.msg("load data failed ");
                }
                //不刷新下会展示不出来
                ins.reload({
                    elem: '#test1'
                    , width: '70%' //设置容器宽度
                    , arrow: 'always' //始终显示箭头
                    //,anim: 'updown' //切换动画方式
                });
            }, 'json');


            // 获取图片分类
        });
    });

    const bordUrl = "http://120.27.243.49:7301/mock/5da0991bf59b9f0e89ff3379/example/mock/scrollBord/list";
    const $ = layui.jquery ;
    // 公告栏
    $.get(bordUrl,function (data,status) {
        if (status === "success"){
           let dataList = data.data ;
            var html ="";
           $.each(dataList,function (index,item) {
                html += '<a href=' ;
                html += item.link_url ;
                html += '><div class="layui-card-body" style="border-bottom: solid 1px #eeeeee">' ;
                html += item.name ;
                html += '</div></a>' ;
           });
           $("#scroll_bord").html(html);
        }
    },'json');
    function imgClick(e) {
        console.log(e);
        layer.msg('this is image');
    }

    function PicClick(e) {
        layui.router()
    }
    let flow ;
    layui.use('flow', function(){
        const baseUrl = window.location.protocol + "//" + window.location.host ;
        let flowPicUrl = baseUrl + "/videourl/photowall/query/topic";
        flow = layui.flow;
        flow.load({
            elem: '#LAY_demo2' //流加载容器
            ,scrollElem: '#LAY_demo2' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,isAuto: false
            ,isLazyimg: true
            ,done: function(page, next){ //加载下一页
                //模拟插入
                setTimeout(function(){
                    var lis = [];
                    let searctText = $("#searchText").val();
                    $.get(flowPicUrl + "?pageNo=" + page + "&searchText=" + searctText, function (res) {
                        console.log("request topic result: " + res.data.data) ;
                        if (res.code === "200"){
                            $.each(res.data.data, function (index, item) {
                                console.log(item);
                                lis.push('<a target="_blank" href="PicDetail.html?topicId=' + item.id + '"> <li><div class="picDetail"><img class="picimg" target="_blank" lay-src="'+ item.imgUrl +'"></div> </li></a>')
                            });
                            next(lis.join(''), page < res.data.count);
                        }
                    }, 'json');
                }, 500);
            }
        });
    });

    function clearSearchText(){
        console.log("clear search text");
        $("#searchText").val("");
    }
</script>
</html>